<template>
	<view class="input-box relative" :style="{background:background}">
		<image class="wh28 search" src="__ROOT__/common/images/serch-icon.png" mode=""></image>
		<input type="text" :value="modelValue" @input="$emit('update:modelValue', $event.target.value)"
			placeholder="请输入门店名称" placeholder-style="color: #C3C3C3;font-size: 24rpx;" @confirm="onSearch" />
		<view class="btn" @click="onSearch">
			搜索
		</view>
	</view>
</template>
<script setup>
	import {
		ref,
		onMounted
	} from 'vue'

	defineProps({
		modelValue: {
			type: [String, Number],
			default: ''
		},
		background: {
			type: String,
			default: '#fff'
		}
	})

	const emit = defineEmits(['update:modelValue', 'search'])

	const onSearch = () => {
		emit('search')
	}
</script>
<style scoped lang='scss'>
	.input-box {
		width: 100%;
		height: 74rpx;
		border-radius: 37rpx 37rpx 37rpx 37rpx;
		ovrflow: hidden;

		.search {
			position: absolute;
			top: 50%;
			left: 26rpx;
			transform: translateY(-50%);
		}

		input {
			width: 100%;
			height: 100%;
			padding-left: 66rpx;
			padding-right: 120rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333;
		}

		.btn {
			width: 120rpx;
			height: 100%;
			font-family: PingFang SC, PingFang SC;
			font-weight: 500;
			font-size: 26rpx;
			color: #333333;
			line-height: 74rpx;
			text-align: center;
			position: absolute;
			right: 0;
			top: 0;
		}
	}
</style>